body{
    width: 80%;
    margin: 0 autu;
}

h1{
    text-align: center;
}

footer{
    text-align: center;
    font-size: 12px;
}
footer span{
    margin-right: 2em;
}

#flexbox{
    display: flex;
    background-color: #eee;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: baseline;
    padding:1rem；
}

#flexbox p{
    border:1px red solid;
    order:1
}

#flexbox p:first-child{
    width: 3rem;
    height: 3rem;
    background-color: #fff;
    overflow: hidden;
}

.fz-5{
    font-size: 1.5rem;
    order: 2;
    flex-basis: 300px;
}

#column{
    column-count: 3;
}

.break-avoid{
    break-inside: avoid;
}

#grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px
    grid-template-areas
       "header header"
       "content content"
       "footer footer";
}

header{
    grid-area: header;
}

article{
    grid-area: content;
}

aside{
    grid-area: sidebar;
}